<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>账户</title>
    <link rel="stylesheet" href="https://weui.io/style/weui.css">
    <script src="./ming_mock_vue.js"></script>
    <script src="./config.js"></script>
    <script src="https://minglie.gitee.io/mingpage/static/public/vue/3.2/vue.global.prod.min.js"></script>
</head>

<body>
<div  v-cloak id="main" >
    <div class="container">
        <div class="weui-tab">
            <div class="weui-tab__panel">
                <div class="weui-cells">

                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__bd disv">
                            {{money}}
                        </div>
                        <div  class="weui-cell__bd">
                            <button  @click="postH5event('plusMoneyClick')">存</button>
                            &nbsp; &nbsp; &nbsp;
                            <button  @click="postH5event('subtractMoneyClick')">取</button>

                            <button  @click="quit()">退出</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>


</html>

<script type="module" >


    const vueConstructorData={
        async mounted() {
            if(M.getUserData().username==null){
                window.location.href="/www/login.html"
            }
            window.document.title=  M.getUserData().username+"的账户"
            let that=this;
            const ev1 = new EventSource("http://localhost:7001/event1");
            ev1.onmessage = function (e) {
                let msgObj=JSON.parse(e.data);
                 switch (msgObj.method){
                     case "moneyChange":{
                        that.money=msgObj.param;
                     }
                 }
            }
            this.fetch();
        },
        data() {
            return {
                money: 0,
            }
        },

        methods:{
            async fetch(){
                let r= await  M.request.get("/account/queryMoney",{id:M.getUserData().id});
                this.money=r.data;
            },
            async postH5event(event){
                await  M.request.get("/postH5event",{method:event,id:M.getUserData().id})
            },
            quit(){
                M.setUserData({});
                window.location.href="/www/login.html"
            }
        }
    }
    const {createApp}=Vue;
    const vueApp= createApp(vueConstructorData);
    vueApp.mount('#main');
</script>



<style>
    *{
        margin: 0;
        padding: 0;
    }

    [v-cloak]{
        display: none;
    }

    li{
        list-style:none;
    }

    .badge {
        position: relative;
        margin-right: 10px;
    }
    .badge img{
        width: 50px;
        display: block;
    }
    .badge span {
        position: absolute;
        top: -0.4em;
        right: -0.4em;
    }
    .profile_photo {
        position: relative;
        margin-right: 10px;
    }
    .profile_photo img {
        width: 50px;
        display: block;
    }

    button{
        width: 10vw;
        height: 5vw;
    }

    .disv{
        font-size: 5vw;
    }
</style>






